<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript" src="../jquery/jquery-1.8.3.js"></script>
	<style type="text/css">
		#nav{
			width: 700px;
			height: 50px;
			margin: 0px auto;
			background-color: aquamarine;
		}
		div>ul{
			margin: 0px;
			padding: 0px;
			display: flex;
			justify-content: flex-start;
			width: 100%;
			height: 50px;
			float: left;
		}
		div>ul>li{
			list-style: none;
			line-height: 50px;
			width: 100px;
			text-align: center;
			font-family: "微软雅黑";
		}
		
		.bg{
			background-color: darkcyan;
			color: white;
		}
		
		.bg2{
			background-color: #00FFFF;
			color: white;
		}
		
		li ul{
			list-style: none;
			margin: 0;
			padding: 0;
			background-color: #98FB98;
			display: none;
			color: #000000;
		}
	</style>
	<body>
		<div id="nav">
			<ul>
				<li>
					首页
					<ul>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
					</ul>
				</li>
				<li>
					身边团购
					<ul>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
					</ul>
				</li>
				<li>
					美食
					<ul>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
					</ul>
				</li>
				<li>
					电影
					<ul>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
					</ul>
				</li>
				<li>
					KTV
					<ul>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
					</ul>
				</li>
				<li>
					酒店
					<ul>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
					</ul>
				</li>
				<li>
					购物
					<ul>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
						<li>充数哈哈</li>
					</ul>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		$("li").hover(function(){
			$(this).addClass("bg");
			$(this).find("ul").slideDown(100)
			$(this).find("ul").find("li").hover(function(){
				$(this).addClass("bg2")
			},
			function(){
				$(this).removeClass("bg2")
			})
		},
		function(){
			$(this).removeClass("bg");
			$(this).find("ul").slideUp(100)
		})
	</script>
</html>
